<template>
  <div class="phone-group">
    <h2 id="phones">手机</h2>
    <div class="phones-list">
      <ul>
        <li >
          <div class="phone-img">
            <img src="../../assets/images/phone_1.png" height="285" width="285"/>
          </div>
          <div class="phone-name">
            <p>真我GT Neo2T</p>
          </div>
          <div class="phone-price">
            <p>￥2,099</p>
          </div>
          <div class="phone-color">
            <span style="background: linear-gradient(141deg, #F6F6F6 0%, #D7D7D7 100%);"></span>
            <span style="background: linear-gradient(141deg, #898989 0%, #191919 100%);"></span>
          </div>
        </li>
        <li>
          <div class="phone-img">
            <img src="../../assets/images/phone_2.png" height="285" width="285"/>
          </div>
          <div class="phone-name">
            <p>真我GT Neo2T</p>
          </div>
          <div class="phone-price">
            <p>￥2,099</p>
          </div>
          <div class="phone-color">
            <span style="background: linear-gradient(141deg, #281F95 0%, #7E94DC 50%, #281F95 100%);"></span>
            <span style="background: linear-gradient(141deg, #CDE1E9 0%, #FFF2EE 50%, #E9CDF2 100%);"></span>
          </div>
        </li>
        <li>
          <div class="phone-img">
            <img src="../../assets/images/phone_3.png" height="285" width="285"/></div>
          <div class="phone-name">
            <p>真我GT Neo2T</p>
          </div>
          <div class="phone-price">
            <p>￥2,099</p>
          </div>
          <div class="phone-color">
            <span style="background: linear-gradient(90deg, #FCF1D5 0%, #82D9F2 51%, #4F9FF3 100%);"></span>
            <span style="background: linear-gradient(90deg, #DEF789 0%, #9ABE42 100%);"></span>
            <span style="background: linear-gradient(90deg, #9CA4AB 0%, #3F474E 100%);"></span>
          </div>
        </li>
        <li>
          <div class="phone-img">
            <img src="../../assets/images/phone_4.png" height="285" width="285"/>
          </div>
          <div class="phone-name">
            <p>真我GT Neo2T</p>
          </div>
          <div class="phone-price">
            <p>￥2,099</p>
          </div>
          <div class="phone-color">
            <span style="background: linear-gradient(141deg, #A6A4C7 0%, #D1D0E8 50%, #8481B0 100%);"></span>
            <span style="background: linear-gradient(141deg,#3F3B3B 0%, #B3B0B0 50%, #130F0F 100%);"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "phone"
}
</script>

<style scoped>
</style>
<style src="../../assets/CSS/list.css"></style>